<template>
  <div>
    <!-- 搜索框和轮播图 -->
    <div class="saerch_banner">
      <!-- 搜索 -->
      <div class="saerchs" @click="register">
        <p>请输入您要搜索的内容</p>
        <div class="saerch_img">
          <img src="../img/search.png" alt="" />
        </div>
      </div>
      <!-- 轮播图 -->
      <div class="all">
        <div class="show">
        </div>
      </div>

    </div>
    <!-- 分类图标 -->
    <div class="classifys">
      <div class="classify">
        <div class="clas_img">
          <img src="../img/img16967018abc1c6c70.png" alt="" />
        </div>
        <div class="clas_text">书写工具</div>
      </div>
      <div class="classify">
        <div class="clas_img">
          <img src="../img/img16967518abc1c9768.png" alt="" />
        </div>
        <div class="clas_text">本册纸品</div>
      </div>
      <div class="classify">
        <div class="clas_img">
          <img src="../img/img16967618abc1cba90.png" alt="" />
        </div>
        <div class="clas_text">书籍教辅</div>
      </div>
      <div class="classify">
        <div class="clas_img">
          <img src="../img/img16967718abc1cddb8.png" alt="" />
        </div>
        <div class="clas_text">体育用品</div>
      </div>
      <div class="classify">
        <div class="clas_img">
          <img src="../img/img16968018abc1d04c8.png" alt="" />
        </div>
        <div class="clas_text">生活用品</div>
      </div>
    </div>
    <!-- 大图标 -->
    <div class="big_clas_img">
      <div class="big_clas_img_left">
        <img src="../img/img16990918abc404050.png" alt="" />
      </div>
      <div class="big_clas_img_right">
        <div class="big_clas_img_top">
          <img src="../img/img16991518abc41da78.png" alt="" />
        </div>
        <div class="big_clas_img_bottom">
          <img src="../img/img16991418abc41b368.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 热门产品 -->
    <div class="fire">
      <div class="fire_img">
        <img src="../img/img17004218abc5d5988.png" alt="" />
      </div>
      <div class="fire_text">
        热销商品
      </div>
    </div>
    <div class="all_com">

    </div>

    <!-- 导航栏 -->
    <div class="navigations">
        <div class="navigation">
          <div class="nav_img">
            <img src="../img/img17015318abca09860.png" alt="" />
          </div>
          <div class="nav_text" id="texts">首页</div>
        </div>
        <div class="navigation">
          <div class="nav_img">
            <img src="../img/img17014818abca09860.png" alt="" />
          </div>
          <div class="nav_text">分类</div>
        </div>
<<<<<<< HEAD
        <div class="navigation">
=======
        <div class="navigation" @click="clock">
>>>>>>> 5028f9b58db5c13c979c3086b53f8fdfe43ff4d1
          <div class="nav_img" id="imgs">
            <img src="../img/img17436318acb9f7278.png" alt="" />
          </div>
          <div class="nav_text">打卡</div>
        </div>
        <div class="navigation">
          <div class="nav_img">
            <img src="../img/img17015718abca23670.png" alt="" />
          </div>
          <div class="nav_text">购物车</div>
        </div>
        <div class="navigation">
          <div class="nav_img">
            <img src="../img/img17015418abca09860.png" alt="" />
          </div>
          <div class="nav_text">我的</div>
        </div>
    </div>
  </div>
</template>


<style scoped>
<<<<<<< HEAD
body {
	font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "黑体", arial, STHeiti, '\5b8b\4f53';
	background-color: #fafafa;
}
/* 搜索和轮播图 */
.saerch_banner {
=======
.Main_box{
/* 搜索和轮播图 */
>>>>>>> 5028f9b58db5c13c979c3086b53f8fdfe43ff4d1
  width: 100%;
  height: 200px;
  padding-top: 10px;
  background-image: url("../assets/homeBack.png");
  background-size: cover;
}

/* 搜索 */
.saerchs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: 30px;
  color: #8a8a8a;
  text-indent: 15px;
  font-size: 17px;
  margin-left: 5%;
  border-radius: 15px;
  background-color: #ffffff;

}

.saerch_img {
  height: 23px;
}

.saerch_img img {
  height: 100%;
  margin-left: -12%;
}

/* 轮播图 */
.show {
  width: 90%;
  height: 150px;
  margin-left: 5%;
  margin-top: 20px;
  margin-bottom: 80px;
  overflow: hidden;
  position: relative;
  background-image: url("../assets/banner.jpg");
  background-size: 100% 100%;
}

.print {
  display: flex;
  width: 400%;
  transition: all 0.5s;
}

.dots {
  display: flex;
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
}

.dot {
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-radius: 10px;
  background-color: lightgray;
  cursor: pointer;
}

.dot.active {
  background-color: white;
}

.print img {
  width: 25%;
  height: 100%;

}

/* 分类图标 */
.classifys {
  width: 100%;
  display: flex;
  height: 5.55rem;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
}

.classify {
  width: 20%;
  height: 75px;
}

.clas_img {
  width: 90%;
  margin-top: 5px;

  height: 60px;
}

.clas_img img {
  width: 68%;
  margin-top: 10%;
  margin-left: 21%;
}

.clas_text {
  font-size: 14px;
  width: 100%;
  text-align: center;
  color: lightslategrey;
}

.big_clas_img {
  width: 94%;
  margin-left: 3%;
  margin-top: 10px;
  padding-top: 10px;
  height: 185px;
  background-color: white;
  display: flex;
}

.big_clas_img_left {
  width: 43%;
  height: 100%;
}

.big_clas_img_left img {
  width: 100%;
}

.big_clas_img_right {
  width: 56%;
  margin-left: 2%;
  height: 100%;
}

.big_clas_img_top {
  width: 100%;
  height: 45%;
}

.big_clas_img_top img {
  width: 100%;
}

.big_clas_img_bottom {
  width: 100%;
  height: 45%;

}

.big_clas_img_bottom img {
  width: 100%;
  margin-top: 10px;
}

/* 热销产品 */
.fire {
  width: 100%;
  display: flex;
  height: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
}

.fire_img {
  width: 6.3%;
  margin-left: 1.5%;
  margin-right: 1.5%;
}

.fire_img img {
  width: 100%;
}

.fire_text {

  color: rgba(255, 141, 26, 1);
}

.all_com {
  width: 92%;
  margin-left: 4%;
  margin-top: 5px;
  column-count: 2;
  column-gap: 0;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.com {
  width: 95%;
  break-inside: avoid;
  padding-top: 1px;
  background-color: white;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.com_img {
  width: 92%;
  margin-left: 4%;
  margin-top: 5px;
}

.com_img img {
  width: 100%;
  border-radius: 5px;
}

.com_text {
  color: #606360;
  font-size: 14px;
  width: 92%;
  margin-left: 4%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com_texts {
  font-size: 12px;
  color: rgba(139, 141, 140, 1);
  width: 92%;
  margin-left: 4%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.com_price {
  width: 92%;
  margin-left: 4%;
}

/* 导航栏 */
.navigations {
  width: 96%;
  margin-left: 2%;
  display: flex;
  justify-content: center;
  height: 60px;
  position: sticky;
  bottom: 0;
  background-color: white;
}

.navigation {
  width: 100%;
  height: 100%;
}

.nav_img {
  width: 100%;
  height: 60%;

}

.nav_img img {
  width: 40%;
  margin-left: 30%;
  margin-top: 5px;
}

.nav_text {
  width: 100%;
  text-align: center;
}

#texts {
  color: #eb5743;
}

#imgs img {
  width: 75%;
  position: relative;
  left: -12px;
  top: -20px;
}

a {
  text-decoration: none;
  color: #000;

}

/* 状态一: 未被访问过的链接 */
a:link {
  text-decoration: none;
  color: #000;
}

/* 状态二: 已经访问过的链接 */
a:visited {
  text-decoration: none;
  color: #000;
}

/* 状态三: 鼠标划过(停留)的链接(默认红色) */
a:hover {
  text-decoration: none;
  color: #000;
}

/* 状态四: 被点击的链接 */
a:active {
  text-decoration: none;
  color: #000;
}
</style>


<script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  
  // 关键：创建路由实例
  const router = useRouter()
  
  const register =() =>{
    // 现在可以使用 router 实例了
    router.push('/search')
  }

  const clock =() =>{
    // 现在可以使用 router 实例了
    router.push('/clock')
  }
</script>